<template>
  <!-- 表单-组件(自定义) -->
  <el-row :gutter="rows.gutter" :type="rows.type"
    :justify="rows.justify" :align="rows.align" :tag="rows.tag">
    <el-form :model="form" ref="form" @submit.native.prevent
      :inline="option.inline" :rules="option.rules" :status-icon="option.isIcon"
      :size="option.size" :disabled="option.disabled" :inline-message="option.inlineMsg"
      :label-width="option.labelW" :label-position="option.labelP" :label-suffix="option.labelS">
      <!-- 内容区 -->
      <template v-for="(item, index) in itemOption">
        <slot :name="'cols_'+item.prop" :row="item" :$index="index">
          <el-col :span="colsFn(item,'span')" :offset="colsFn(item,'offset')" :push="colsFn(item,'push')" :pull="colsFn(item,'pull')"
            :xs="colsFn(item,'xs')" :sm="colsFn(item,'sm')" :md="colsFn(item,'md')" :lg="colsFn(item,'lg')" :xl="colsFn(item,'xl')"
            :tag="colsFn(item,'tag')" :key="index" :style="item.style">
            <!-- slot可自定义-元素 默认input -->
            <slot :name="item.prop" :row="item" :$index="index">
              <el-form-item :label="item.label" :prop="item.prop" :label-width="item.labelW"
                :required="item.required" :rules="item.rules" :error="item.error"
                :show-message="item.showMsg" :inline-message="item.inlineMsg" :size="item.size">
                <!-- slot可自定义-item内部 -->
                <slot :name="'item_'+item.prop" :row="item" :$index="index">
                  <el-input v-model.trim="form[item.prop]" :type="item.iType" :clearable="item.iClearable|clearable_f"
                    :maxlength="item.iMaxlength" :minlength="item.iMinlength" :show-word-limit="item.iLimit"
                    :placeholder="item.iPlaceholder||item.label" :show-password="item.iPassword" :style="item.iStyle"
                    :disabled="item.iDisabled" :size="item.iSize" :prefix-icon="item.iPrefixIcon" :suffix-icon="item.iSuffixIcon"
                    :rows="item.iRows" :autosize="item.iAutosize" :readonly="item.iReadonly" :resize="item.iResize"
                    :autofocus="item.iAutofocus">
                      <!-- slot自定义-输入框头部内容 -->
                      <template #prefix><slot :name="'prefix_'+item.prop"></slot></template>
                      <!-- slot自定义-输入框尾部内容 -->
                      <template #suffix><slot :name="'suffix_'+item.prop"></slot></template>
                      <!-- slot自定义-输入框前置内容 -->
                      <template #prepend><slot :name="'prepend_'+item.prop"></slot></template>
                      <!-- slot自定义-输入框后置内容 -->
                      <template #append><slot :name="'append_'+item.prop"></slot></template>
                    </el-input>
                </slot>
                <!-- slot自定义-标签文本的内容 -->
                <template #label>
                  <slot :name="'label_'+item.prop" :row="item" :$index="index"></slot>
                </template>
                <!-- slot自定义-自定义表单校验信息的显示方式 -->
                <template #error="{error}">
                  <slot :name="'error_'+item.prop" :row="item" :$index="index" :error="error"></slot>
                </template>
              </el-form-item>
            </slot>
          </el-col>
        </slot>
      </template>
      <!-- 其他内容 -->
      <slot name="append"></slot>
      <!-- 提交 -->
      <slot name="button" :formRef="$refs.form">
        <div class="subBtn" v-if="btnDef">
          <el-button type="primary" size="small" @click="confirm">确 定</el-button>
        </div>
      </slot>
    </el-form>
  </el-row>
</template>
<script>
import ui from 'element-ui'
export default {
  name: 'cForm',
  props: {
    form: { // 数据 form
      type: Object,
      default: _ => { return {} }
    },
    option: { // 配置
      type: Object,
      default: _ => {
        return { labelW: '80px' }
      }
    },
    itemOption: { // item配置
      type: Array,
      required: true
    },
    rows: { // 行 layout布局
      type: Object,
      default: _ => { return {} }
    },
    cols: { // 列 layout布局
      type: Object,
      default: _ => { return {} }
    },
    btnDef: Boolean // 默认提交-按钮
  },
  data() {
    return {

    }
  },
  computed: {
  },
  components: {
    ElForm: ui.Form, ElFormItem: ui.FormItem,
    ElButton: ui.Button
  },
  created() {

  },
  methods: {
    // 字段--cols属性
    colsFn(row, attr) {
      const cols = row.cols || this.cols
      return cols[attr]
    },
    // 确定--提交
    confirm() {
      const formRefs = this.$refs.form
      this.$emit('confirm', formRefs)
    },
    // 重置
    resetFields() {
      this.$refs.form.resetFields()
    },
    // 清除
    clearValidate(props) {
      this.$refs.form.clearValidate(props)
    },
    // 检验-字段
    validateField(props, callback) {
      this.$refs.form.validateField(props, callback)
    },
    // 整个表单验证
    validate(callback) {
      return this.$refs.form.validate(callback)
    }
  },
  filters: {
    // 是否清除input内容-按钮
    clearable_f(val) {
      return val == null ? true : val
    }
  }
}
</script>
<style lang="scss" scoped>
.subBtn{
  text-align: center;
}
</style>
